'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/mjs1_list';
import { Button,Tab,Icon,Menu,Pagination,Link,Dialog,Field,Form} from 'qnui';
import { Row, Col } from 'qnui/lib/grid';
import Tools from 'utils/index';
import linkConfig from 'utils/urls';
import MainNotice from 'components/main-notice/index';
import SystemDialog from 'components/system-dialog/index';
import FormMjs1Step1 from 'components/form-mjs1-step1/index';
import FormMjs1Step2 from 'components/form-mjs1-step2/index';
import FormMjs1Step3 from 'components/form-mjs1-step3/index';
import './index.scss';

const links = Tools.isLocal() ? linkConfig.local : linkConfig.onLine;
class Mjs1List extends React.Component {
  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.dispatch = this.props.dispatch;
    this.state={
    			pageSize:10,
    			participate_range:"0"
    		}
  }
  componentDidMount(){
	  this.dispatch(
	    		actions.getMjsList(1,this.state.pageSize,this.state.participate_range)
			);
  }
  componentWillReceiveProps(nextProps){
	  if(nextProps.mjs1_list.mjs_data){
		  this.field.setValues(nextProps.mjs1_list.mjs_data);
	  }
  }
  handlePageChange(page){
	  this.dispatch(
	    		actions.getMjsList(page,this.state.pageSize,this.state.participate_range)
			);
  }
  handlePageSizeChange(pageSize){
	  this.setState({pageSize});
	  this.dispatch(
	    		actions.getMjsList(1,pageSize)
	  );
  }
  handleGetSingleItem(){
	  this.setState({participate_range:"1"});
	  this.dispatch(
	    		actions.getMjsList(1,this.state.pageSize,"1")
			);
  }
  handleGetAllShop(){
	  this.setState({participate_range:"0"});
	  this.dispatch(
	    		actions.getMjsList(1,this.state.pageSize,"0")
			);
  }
  removeActive(active){
	  Dialog.confirm({
		  content:"确定要删除这个活动吗？",
		  onOk:()=>{
			  this.dispatch(
			    		actions.removeMjs({id:active.id,activity_id:active.activity_id})
			  );
		  }
	  });
  }
  handleEditActive(active){
	  this.dispatch(
    		actions.getMjs(active.id)
		);
  }
  onMjsDialogClose(){
	  this.dispatch(
    		actions.closeMjsDialog()
		);
  }
  onMjsDialogOk(){
  		this.field.validate((errors, values) => {
	 	      if (errors) {
	 	                return false;
	 	            }
	 			if(parseInt(window.info.timestemp)+1800 < Date.parse(new Date())/1000){
	 					// 操作授权超过半小时，请重新授权
	 					this.setState({"refreshDialog":true});
	 					return false;
	 				}

	 			Dialog.confirm({
	 			        content: '确定要修改这个折扣吗？',
	 			        onOk: () => {
	 				 	      this.props.dispatch(actions.updateMjs(values));
	 			          }
	 			});
  		});
  }
  handleCreate(){
	  this.props.history.push({pathname:"mjs1",state:{createNew:"true"}});
  }

	onCloseSystemDialog(){
		this.setState({"refreshDialog":false,"orderDialog":false});
		this.props.dispatch(actions.closeDialog());
	}
	tabChange(tab_id){
		switch(tab_id){
			case "countdown":	
				　window.location.href=links.ring_tags;
				break;
			case "limit_time":
				　window.location.href=links.zhekou1_list;
				break;
			case "mjs1":
				break;
			case "limit_buy":
				 window.location.href=links.limit_buy;
				break;
			case "qrring":
				 window.location.href=links.qrring;
				break;
		}
	}
  render() {
		const extraContent = <div>
										<Button size="large" type="primary">
											<Icon type="pin" />店内打折
										</Button>
											&nbsp;&nbsp;
										<Button size="large" type="secondary">
											推广打折
										</Button>
									</div>;
		const mjs1_list = this.props.mjs1_list.data;
		const button1_type = this.state.participate_range=="1"?"secondary":"primary";
		const button2_type = this.state.participate_range=="1"?"primary":"secondary";
		const formItemLayout = {
				labelCol: {span: 6},
				wrapperCol: {span: 17},
			};
    return (
      <div className="page2-page">
      	<MainNotice />
      	<Dialog
      			style={{width:"800px"}}
		      	visible = {this.props.mjs1_list.mjsDialog}
			      onOk = {this.onMjsDialogOk.bind(this)}
			      onCancel = {this.onMjsDialogClose.bind(this)}
			      onClose = {this.onMjsDialogClose.bind(this)} 
					title = "满就送详情"
      			>
      	 <Form direction="ver"  size="large" field={this.field}>
		        <Tab>
			        	<Tab.TabPane key={1} tab="时间和条件">
			      	 	<FormMjs1Step1
					   		field={this.field}
					 			formItemLayout={formItemLayout}
								tagName={this.props.mjs1_list.mjs_data?this.props.mjs1_list.mjs_data.name:false}
								setName={()=>{}}
			      	 		
					   			/>
			        	</Tab.TabPane>
			        	<Tab.TabPane key={2}  tab="折扣和包邮">
				      	<FormMjs1Step2
						  		field={this.field}
						  		formItemLayout={formItemLayout}
						  		setExcludeArea={()=>{}}
						  		/>
			        	</Tab.TabPane>
			        	<Tab.TabPane key={3}  tab="礼物和VIP">
			      	 	<FormMjs1Step3
				      	 	formItemLayout={formItemLayout}
						  		field={this.field}
						  		setGift={()=>{}}
						  		setShopMemberLevel={()=>{}}
			      	 			/>
			        	</Tab.TabPane>
		        </Tab>
      	 </Form>
      	</Dialog>

      	<SystemDialog 
	 		 	 loginError={this.props.mjs1_list.loginError}
			    creating={this.props.mjs1_list.creating}
			    message={this.props.mjs1_list.message}
			    error={this.props.mjs1_list.error}
				 refreshDialog={this.state.refreshDialog}
				 orderDialog={this.state.orderDialog}
				 onCloseDialog={this.onCloseSystemDialog.bind(this)}
	 			/>
      	<Tab size="medium" type="wrapped" className="my-tab-bar" activeKey="mjs1" tabBarExtraContent={extraContent}  style={{marginTop:"5px"}} onChange={this.tabChange.bind(this)}>
		       <Tab.TabPane tab="付款倒计时折扣" key="countdown"></Tab.TabPane>
			   <Tab.TabPane tab="二维码倒计时" key="qrring"></Tab.TabPane>
			   {/*<Tab.TabPane tab="循环定时打折" key="daily_loop"></Tab.TabPane>
			   <Tab.TabPane tab="付款打折" key="pay"></Tab.TabPane>*/}
		       <Tab.TabPane tab="限时打折" key="limit_time"></Tab.TabPane>
			    <Tab.TabPane tab="满打折/包邮" key="mjs1">
			    <Row style={{padding:"0"}}>
						<Col span="12">
						{/*
							<RadioGroup defaultValue="onseal" onChange={this.handleCheckStatus.bind(this)}>
								<Radio id="all" value="all">全部</Radio>
								<Radio id="runing" value="runing">进行中</Radio>
								<Radio id="waitting" value="waitting">未开始</Radio>
								<Radio id="stoped" value="stoped">已结束</Radio>
							</RadioGroup>
						*/}
						
						<Button.Group>
							<Button type={button1_type} onClick={this.handleGetAllShop.bind(this)}>全店参与</Button>
							<Button type={button2_type} onClick={this.handleGetSingleItem.bind(this)}>单品参与</Button>
							<Button type="secondary" onClick={this.handleCreate.bind(this)}>创建活动</Button>
				      </Button.Group>
						</Col>
						<Col span="12">
							 <Pagination total={this.props.mjs1_list.total} pageSize={this.state.pageSize} pageSizeList={[10,20,30]} pageSizeSelector="dropdown" type="simple" onChange={this.handlePageChange.bind(this)} onPageSizeChange={this.handlePageSizeChange.bind(this)} />
						</Col>
				</Row>
			    <Row align="center" className="list" >
					<Col span="2">名称</Col>
					<Col span="4">开始时间</Col>
					<Col span="4">结束时间</Col>
					<Col span="2">状态</Col>
					<Col span="2">范围</Col>
					<Col span="5">描述</Col>
					<Col span="2">操作</Col>
				</Row>
			    {
			    	mjs1_list.map((activity,key)=>{
						let time = new Date();
						let start_time = new Date(activity.start_time);
						let end_time = new Date(activity.end_time);
						let is_waitting = time.getTime()<start_time.getTime();
						let is_end = time.getTime()>end_time.getTime();
						let statu = is_waitting?"未开始":(is_end?"已结束":"进行中");
						let color = is_waitting?"#3089DC":(is_end?"#C7C7C7":"#1BB11B");
						const range = activity.participate_range=="1"?"单品参与":"全店参与";
						const menu = <Menu>
											<Menu.Item key={activity.activity_id} onClick={this.removeActive.bind(this,activity)}>删除</Menu.Item>
										</Menu>;
						let descrip = "";
						if(activity.is_amount_over=="true"){
							descrip += "满"+(activity.total_price/100)+"元";
						}
						if(activity.is_item_count_over=="true"){
							descrip += "满"+(activity.item_count)+"件";
						}
						if(activity.is_send_gift=="true"){
							descrip += "送礼物";
						}
						if(activity.is_decrease_money=="true"){
							descrip += "减"+activity.decrease_amount/100+"元";
						}
						if(activity.is_discount=="true"){
							descrip += "打"+activity.discount_rate/100+"折";
						}
						if(activity.is_free_post=="true"){
							descrip += "包邮";
						}
						if(activity.is_shop_member=="true"){
							descrip += "，限定会员";
						}
						
			    		return (
			    				<Row  key={key}  align="center" className="list"  style={{color:color}}>
			    					<Col span="2">{activity.name}</Col>
			    					<Col span="4">{activity.start_time}</Col>
			    					<Col span="4">{activity.end_time}</Col>
			    					<Col span="2">{statu}</Col>
			    					<Col span="2">{range}</Col>
			    					<Col span="5">{descrip}</Col>
			    					<Col span="2"><Button.Split size="small" type="secondary" menu={menu} onClick={this.handleEditActive.bind(this,activity)}>详情</Button.Split></Col>
			    				</Row>			    				
			    		)
			    	})
			    }
			    </Tab.TabPane>
			    <Tab.TabPane tab="限购优惠" key="limit_buy"></Tab.TabPane>
			    {/*<Tab.TabPane tab="预热折扣" key="5"></Tab.TabPane>*/}
			</Tab>
      </div>
    );
  }
}


// map state to props
export default connect((state)=> {
  return {
    mjs1_list: state.mjs1_list
  };
})(Mjs1List);
